<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/zTreeStyle.css">
    <link rel="stylesheet" href="./css/glset.css">
    <script type="text/javascript" src="./js/jquery-2.1.0.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/Global.js"></script>
    <script src="./js/jquery.ztree.all.js"></script>
    <style>
        .wrap {
            text-align: center;
        }

        .ztree {
            padding-left: 200px;
            padding-top: 50px;
        }

        .ztree li span.button {
            background-position-x: -144px;
            background-position-y: -1px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
<script>

    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: true,
            showRenameBtn: true,
            removeTitle: '删除',
            renameTitle: '重命名'
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pid",
            },
            key: {
                children: "children"
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            onRemove: onRemove,
            onRename: onRename
        }
    };
    var zNodes = [{ id: 0, pid: 0, name: "顶级分类", pids: "--0--", level: 0, open: true }];
    $.ajax({
        url: `${API}/erpSaleParameter/getParameterCustomerByParameterIdList`,
        type: 'get',
        success: function (res) {

            zNodes = zNodes.concat(res.data);
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }
    })

    var log, className = "dark";
    function beforeDrag(treeId, treeNodes) {
        return false;
    }
    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        console.log(treeNode)
    }
    function beforeRemove(treeId, treeNode) {
        console.log(treeId, treeNode)
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        if (confirm("确认删除'" + treeNode.name + "' ?")) {

            $.ajax({
                url: `${API}/erpSaleParameter/removeParameterCustomerById?ParameterId=${treeNode.id}`,
                type: 'get',
                success: function (res) {
                    console.log(res)
                }
            })
        }
    }
    function onRemove(e, treeId, treeNode) {
        showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
    }
    function beforeRename(treeId, treeNode, newName, isCancel) {
        // className = (className === "dark" ? "" : "dark");
        // showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
        // if (newName.length == 0) {
        //     setTimeout(function () {
        //         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //         zTree.cancelEditName();
        //         alert("Node name can not be empty.");
        //     }, 0);
        //     return false;
        // }
        return true;
    }
    function onRename(e, treeId, treeNode, isCancel) {
        showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
        let zid = treeNode.zid
        let bol = true
        if(treeNode.zid) {
            bol = false
            
        }    else {
            zid = 'SF0'+ new Date().getTime()
        }   
        $.ajax({
            url: `${API}/erpSaleParameter/inertOrUpdateParameterCustomer?addOrXiuGai=${bol}&id=${treeNode.id}&pid=${treeNode.pid}&name=${treeNode.name}&zid=${zid}&iszh=${typeof (treeNode.iszh) ? '' : treeNode.iszh}`,
            type: 'get',
            success: function (res) {
                var zTree =  $.fn.zTree.getZTreeObj("treeDemo");
                treeNode.zid = zid
                zTree.updateNode(treeNode);
            }
        })
        console.log(treeNode)
    }
    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {

        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
            return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };
    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
    }
</script>

</html>